<template>
  <div class="app-container">
    <div class="searchBox">
      <span>时间：</span>
      <el-date-picker
        v-model="listModel.date"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
      <el-button type="primary" class="query-btn" @click="fetchData">
        搜索
      </el-button>
    </div>

    <div>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" style="margin-top: 25px;">
          <div
            id="pageEcharts"
            style="width:100%; height:400px; border: 1px solid #EBEEF5;"
          />
        </el-col>
        <el-col :xs="24" :sm="12" style="margin-top: 25px;">
          <div
            id="timeEcharts"
            style="width:100%; height:400px; border: 1px solid #EBEEF5;"
          />
        </el-col>
      </el-row>
    </div>

    <el-table
      v-loading="listModel.loading"
      :data="listModel.data"
      stripe
      style="width: 100%; margin-top: 25px;"
      border
      height="400"
    >
      <el-table-column prop="moduleName" label="页面名称" />
      <el-table-column prop="visitNum" label="访问次数" width="120" />
      <el-table-column prop="userNum" label="访问人数" width="120" />
      <el-table-column
        prop="averageSimTime"
        label="人均访问时长(分钟)"
        width="180"
      />
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :current-page.sync="listModel.currentPage"
      :total="listModel.total"
      @current-change="fetchData"
    />
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    const now = new Date()
    const aWeekAgo = new Date()
    aWeekAgo.setDate(now.getDate() - 7)
    return {
      pageEcharts: null,
      timeEcharts: null,
      activeName: 'first',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      listModel: {
        loading: true,
        currentPage: 1,
        start: 0,
        length: 10,
        total: 1,
        data: [],
        search: {},
        date: [aWeekAgo, now],
        pageEchartsOptions: {
          title: {
            x: 'center',
            text: '人均访问页面数'
          },
          tooltip: {
            trigger: 'axis',
            confine: true,
            formatter: params => {
              return (
                window.formatter.formatDate(params[0].name, 'MM月dd日') +
                '人均访问页面数：' +
                params[0].data
              )
            }
          },
          legend: {
            bottom: '50px',
            data: ['人均访问页面数']
          },
          grid: {
            left: '10%',
            right: '4%',
            bottom: 80,
            containLabel: true
          },
          dataZoom: [
            {
              type: 'inside'
            },
            {
              handleIcon:
                'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            }
          ],
          xAxis: [
            {
              type: 'category',
              splitNumber: 5,
              axisLabel: {
                formatter: function(a) {
                  return window.formatter.formatDate(a, 'MM月dd日')
                }
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              data: []
            }
          ]
        },
        timeEchartsOptions: {
          title: {
            x: 'center',
            text: '人均访问页面时长'
          },
          tooltip: {
            trigger: 'axis',
            confine: true,
            formatter: params => {
              return (
                window.formatter.formatDate(params[0].name, 'MM月dd日') +
                '人均访问页面时长：' +
                params[0].data +
                '分钟'
              )
            }
          },
          legend: {
            bottom: '50px',
            data: ['人均访问页面时长']
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: 80,
            containLabel: true
          },
          dataZoom: [
            {
              type: 'inside'
            },
            {
              handleIcon:
                'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            }
          ],
          xAxis: [
            {
              type: 'category',
              splitNumber: 5,
              axisLabel: {
                formatter: function(a) {
                  return window.formatter.formatDate(a, 'MM月dd日')
                }
              },
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisLabel: {
                formatter: '{value}'
              }
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              data: []
            }
          ]
        }
      }
    }
  },
  mounted() {
    const echarts = require('echarts')
    const pageEchartsElement = document.getElementById('pageEcharts')
    this.pageEcharts = echarts.getInstanceByDom(pageEchartsElement)
    if (!this.pageEcharts) {
      this.pageEcharts = echarts.init(pageEchartsElement)
      this.pageEcharts.setOption(this.listModel.pageEchartsOptions)
    }

    const timeEchartsElement = document.getElementById('timeEcharts')
    this.timeEcharts = echarts.getInstanceByDom(timeEchartsElement)
    if (!this.timeEcharts) {
      this.timeEcharts = echarts.init(timeEchartsElement)
      this.timeEcharts.setOption(this.listModel.timeEchartsOptions)
    }

    this.fetchData()
  },
  methods: {
    fetchData() {
      const self = this
      const param = {
        start: (this.listModel.currentPage - 1) * this.listModel.length,
        length: this.listModel.length,
        query: {}
      }
      const date = this.listModel.date
      if (date && date.length === 2) {
        param.query.startDate = window.formatter.formatDate(date[0])
        param.query.endDate = window.formatter.formatDate(date[1])
      }

      self.listModel.loading = true
      request({
        url: '/mobile/mobileModuleActivity/queryModuleActivity',
        data: param,
        method: 'POST'
      }).then(res => {
        const { pagerInfo, moduleActivities } = res
        if (pagerInfo && Array.isArray(moduleActivities)) {
          const pageData = pagerInfo
          self.listModel.data = pageData.data
          self.listModel.total = pageData.pages
          self.listModel.start =
              (pageData.startIndex - 1) * self.listModel.length

          self.listModel.pageEchartsOptions.series[0].data = []
          self.listModel.pageEchartsOptions.xAxis[0].data = []
          self.listModel.timeEchartsOptions.series[0].data = []
          self.listModel.timeEchartsOptions.xAxis[0].data = []

          for (let i = 0; i < moduleActivities.length; i++) {
            const item = moduleActivities[i]
            self.listModel.pageEchartsOptions.series[0].data.push(
              item.averagePages
            )
            self.listModel.pageEchartsOptions.xAxis[0].data.push(item.date)

            self.listModel.timeEchartsOptions.series[0].data.push(
              (item.averageTimes / 60).toFixed(2)
            )
            self.listModel.timeEchartsOptions.xAxis[0].data.push(item.date)
          }

          self.pageEcharts.setOption(self.listModel.pageEchartsOptions)
          self.pageEcharts.resize()

          self.timeEcharts.setOption(self.listModel.timeEchartsOptions)
          self.timeEcharts.resize()
        }

        self.listModel.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.searchBox {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  .query-btn {
    margin-left: 10px;
  }
}
</style>
